<template>
    <view class="container">
      <!-- 顶部banner图 -->
    <swiper class="banner" :autoplay="true" :interval="3000" :duration="500" v-if="bannerList.length > 0">
		<swiper-item v-for="(item, index) in bannerList" :key="index" @click="handleBannerClick(item)">
			<image :src="item.smallimage" mode="aspectFill"></image>
		</swiper-item>
	</swiper>
      
      <!-- 功能按钮区 -->
      <view class="function-buttons">
        <button class="function-btn platform" @click="jump">
          <image src="/static/images/top.png"></image>
          <text>电商必备软件推荐</text>
        </button>
		
        <button class="function-btn share"  open-type="share">
          <image src="/static/images/share.png"></image>
          <text>分享小程序给好友</text>
        </button>
      </view>
      
     
	  <!-- 推荐列表 -->
		<view class="recommend-list">
		  <view class="recommend-item" 
			v-for="(item, index) in platfromList" 
			:key="index"
			@tap="handleItemClick(item)"
		  >
			<image :src="item.smallimage" mode="aspectFill" class="item-image"></image>
			<view class="item-content">
			  <view class="item-title">{{item.title}}</view>
			  <view class="item-desc">{{item.des}}</view>
			</view>
		  </view>
		</view>
    </view>
  </template>
  
  <script>
	import {fetchPlatformList, baseUrl,fetchGroupDetail,fetchBanner} from "@/api/api.js"
  export default {
    data() {
      return {
		platfromList:[],
		groupData:{
			description:"",
			name:"",
			smallimage:"",
			path:"pages/calculator/calculator"
		},
		bannerList: []
        }
    },
	mounted() {
		this.handleFetchPlatform()
		this.handleFetchGroup()
		this.handleFetchBanner()
	},
	onLoad() {
		uni.showShareMenu({
			withShareTicket: true, // 是否使用带 shareTicket 的转发详情
			menus: ['shareAppMessage', 'shareTimeline'] // 需要显示的菜单项，默认全部显示
		});
	},
	onShareAppMessage() { //发送给朋友
		return {
			title: this.groupData.description,
			imageUrl: this.groupData.smallimage,
			path:this.groupData.path
		}
	},
	onShareTimeline() { //分享到朋友圈
		return {
			title: this.groupData.description,
			imageUrl: this.groupData.smallimage,
			path:this.groupData.path
		}
	},
    methods: {
		async handleFetchPlatform() {
			try {
				const result = await fetchPlatformList();
				this.platfromList = result.data.map(item => {
				  return {
				   ...item,
				    smallimage: baseUrl + item.smallimage
				  };
				});
				
			  } catch (error) {
				console.error('Fetch resource failed:', error);
			  }	 
			  
		},
		async handleFetchGroup() {
			try {
				const result = await fetchGroupDetail(2);
				this.groupData = result.data
				this.groupData.smallimage=baseUrl + this.groupData.smallimage
				console.log(this.groupData.description)
			} catch (error) {
				console.error('Fetch resource failed:', error);
			}
		},
		
			
		// 处理列表项点击
		handleItemClick(item) {
		  uni.navigateTo({
		    url: `/pages/platform/detail?id=${item.id}`
		  })
		},
		jump(){
			uni.switchTab({
				url:"/pages/software/software"
			})
		},
		
		// 获取轮播图
		async handleFetchBanner(){
			try {
				const result = await fetchBanner(2);
				this.bannerList = result.data.map(item => {
					return {
						...item,
						smallimage: baseUrl + item.smallimage
					};
				});
				
			} catch (error) {
				console.error('Fetch resource failed:', error);
			}
		},
		handleBannerClick(item) {
			console.log(item)
			uni.navigateTo({
				url: "/pages/web/banner?id="+item.id
			})
		},
      // 分享功能
      onShareAppMessage() {
        return {
          title: '电商计算器',
          path: '/pages/calculator/calculator'
        }
      }
    }
  }
  </script>
  
  <style>
  .container {
    padding: 20rpx;
    background-color: #f8f8f8;
  }
  
  .banner {
  		width: 100%;
  		height: 300rpx;
  		border-radius: 16rpx;
  		overflow: hidden;
  	}
  
  	.banner image {
  		width: 100%;
  		height: 100%;
  	}
  
  	/* swiper dots */
  	/deep/ .uni-swiper-dot {
  		width: 10rpx;
  		height: 10rpx;
  		background: rgba(255, 255, 255, 0.5);
  	}
  
  	/deep/ .uni-swiper-dot-active {
  		background: #fff;
  	}
  
  .function-buttons {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;
  }
  
  .function-btn {
    flex: 1;
    margin: 0 10rpx;
    /* padding: 20rpx; */
    background-color: #000;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .function-btn image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
  
  .function-btn text {
    color: #fff;
    font-size: 28rpx;
  }
  
  .recommend-list {
    margin-top: 20rpx;
  }
  
  .recommend-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    border: 2rpx solid #ffd591;
  }
  
  .item-image {
    width: 200rpx;
    height: 150rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }
  
  .item-content {
    flex: 1;
  }
  
  .item-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  
  .item-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
  </style> 